<template>
	<div class="ant-pro-pages-list-projects-cardList">
		<a-card style="margin-top: 24px" :bordered="false" title="信息">
			<div slot="extra">
				<a-radio-group v-model="type" @change="getList()">
					<a-radio-button value="0">视频</a-radio-button>
					<a-radio-button value="1">图片</a-radio-button>
				</a-radio-group>
				<a style="margin-left: 20px;" href="#" @click="add()">新增</a>
			</div>
			<a-list :loading="loading" :data-source="data" :grid="{ gutter: 24, column:5 }" :pagination="pagination">
				<a-list-item slot="renderItem" slot-scope="item">
					<a-card class="ant-pro-pages-list-projects-card" hoverable>
						<img v-if="item.url!=''" slot="cover" :src="vuex_src+item.url"
							:alt="item.team_title" />
						<template slot="actions" class="ant-card-actions">
							<a-icon key="delete" type="delete" @click="del(item.id)" />
							<a-icon key="edit" type="edit" @click="edit(item)" />
						</template>
					</a-card>
				</a-list-item>
				<!-- <a-list-item @click="add()">
					<a-card class="ant-pro-pages-list-projects-card" hoverable>
						<img slot="cover" src="@/assets/add.png" alt="添加案例" />
					</a-card>
				</a-list-item> -->
			</a-list>
		</a-card>
	</div>
</template>

<script>
	import moment from 'moment'
	import {
		teamList,
		teamDelete
	} from '@/api/team.js'
	import addTeam from './modules/addTeam.vue'
	export default {
		components: {},
		data() {
			return {
				type:'1',
				data: [],
				form: this.$form.createForm(this),
				pagination: {
					showSizeChanger: true,
					pageSizeOptions: ['10', '20', '50'],
					current: 1,
					pageSize: 10,
					total: 0,
					onChange: (current, size) => {
						this.pagination.current = current;
						this.pagination.pageSize = size;
						this.getList()
					},
					onShowSizeChange: (current, size) => {
						this.pagination.current = current;
						this.pagination.pageSize = size;
						this.getList()
					}
				},
				loading: true
			}
		},
		filters: {
			fromNow(date) {
				return moment(date).fromNow()
			}
		},
		mounted() {
			this.getList()
		},
		methods: {
			add() {
				let that = this;
				this.$dialog(addTeam,
					// component props
					{
						record: {},
						on: {
							ok() {
								that.getList()
								console.log('ok 回调')
							},
							cancel() {
								console.log('cancel 回调')
							},
							close() {
								console.log('modal close 回调')
							}
						}
					},
					// modal props
					{
						title: '新增',
						width: 750,
						centered: true,
						maskClosable: false
					})
			},
			edit(record) {
				let that = this;
				this.$dialog(addTeam,
					// component props
					{
						record,
						on: {
							ok() {
								that.getList()
								console.log('ok 回调')
							},
							cancel() {
								console.log('cancel 回调')
							},
							close() {
								console.log('modal close 回调')
							}
						}
					},
					// modal props
					{
						title: '编辑',
						width: 750,
						centered: true,
						maskClosable: false
					})
			},
			del(id) {
				teamDelete({
					id: id
				}).then(res => {
					this.getList()
				})
			},
			getList() {
				teamList({
					page: this.pagination.current,
					type: this.type,
					size: this.pagination.pageSize
				}).then(res => {
					this.data = res.data.list;
					this.loading = false;
					this.pagination.total = res.data.total
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.ant-pro-components-tag-select {
		/deep/ .ant-pro-tag-select .ant-tag {
			margin-right: 24px;
			padding: 0 8px;
			font-size: 14px;
		}
	}

	.ant-pro-pages-list-projects-cardList {
		margin-top: 24px;

		/deep/ .ant-card-meta-title {
			margin-bottom: 4px;
		}

		/deep/ .ant-card-meta-description {
			height: 44px;
			overflow: hidden;
			line-height: 22px;
		}

		.cardItemContent {
			display: flex;
			height: 20px;
			margin-top: 16px;
			margin-bottom: -4px;
			line-height: 20px;

			>span {
				flex: 1 1;
				color: rgba(0, 0, 0, .45);
				font-size: 12px;
			}

			/deep/ .ant-pro-avatar-list {
				flex: 0 1 auto;
			}
		}
	}
</style>
